import React, {useEffect, useState, useRef} from 'react'
import {Button, Space, message, Tag, Input} from 'antd'
import {ArrowDownOutlined} from '@ant-design/icons'

import {connect} from 'umi'

import moment from 'moment'
import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import Permissions from '@/components/Permissions'
import {
	getCycleDetails,
	getOperationUpdate,
} from '@/service/marketing/awardSettlement/driverDetailList'
import {getOrderType} from '@/service/marketing/commodity'
import {translateDataToTree} from '@/utils/common/index'
import {getMainCompanyList, getCompany} from '@/service/system/company'
import {formatDate} from '@/utils/common/dateFilter'
import {downloadDocumentUrl} from '@/service/common/download'
import {getAllCitys} from '@/service/common'
import {getDict} from '@/service/common/dict'
import {yesoRno, ruleList} from '../../dict'
import 'moment/locale/zh-cn'

const formItemLayout = {
	labelCol: {flex: '90px'},
	wrapperCol: {flex: '1'},
}
const commodityPlan = (props: {user: any}) => {
	const {orgId} = props.user
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)

	const [citysList, setCitysList] = useState([])
	const [orderType, setOrderType] = useState([])
	const [mainCompany, setMainCompanyList] = useState([])
	const [orgSource, setOrgSource] = useState<any>([])

	const [dataSourse, setDataSourse] = useState([])
	const [searchData, setSearchData] = useState({})
	const [formData, setFormData] = useState<any[]>([])
	const [dict, setDict] = useState({
		order_location: [],
		order_car_status: [],
		subsidy_mode: [],
		entity_type: [],
		issue_kind: [],
	})

	// 字典查询
	useEffect(() => {
		// 初始化
		getDict(
			{
				dictKeys: [
					'order_location',
					'order_car_status',
					'subsidy_mode',
					'entity_type',
					'issue_kind',
				],
			},
			(res: any) => {
				setDict(res)
			},
		)
	}, [])

	// 获取主体数据
	const onMainCompanyeListFun = () => {
		getMainCompanyList().then((res: any) => {
			if (res?.success) {
				setMainCompanyList(res.data)
			}
		})
	}

	// 获取组织机构数据
	const onOrgFun = () => {
		getCompany({merchantId: orgId}).then((res: any) => {
			if (res?.success) {
				const list: any = translateDataToTree(res?.data)
				setOrgSource(list as any)
			}
		})
	}
	useEffect(() => {
		onOrgFun()
	}, [orgId])

	/** 获取城市列表 */
	const getCitysFun = () => {
		getAllCitys().then((res: any) => {
			if (res?.success) {
				setCitysList(() => res?.data)
			}
		})
	}

	/** 获取订单类型列表 */
	const getOrderTypeFun = () => {
		getOrderType().then((res: any) => {
			if (res?.success) {
				setOrderType(() => res?.data)
			}
		})
	}

	useEffect(() => {
		getCitysFun()
		getOrderTypeFun()
		onMainCompanyeListFun()
	}, [])

	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		getCycleDetails({
			...params,
			...searchData,
		})
			.then((res: any) => {
				if (res?.success) {
					setDataSourse(() => res?.data?.records)
					setTotal(() => res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}

	// 获取表格数据
	// 自定义一个初始不更新的hook
	const useUpdateEffect = (fn: Function, inputs: any[]) => {
		const didMountRef = useRef(false)
		useEffect(() => {
			if (didMountRef.current) fn()
			else didMountRef.current = true
		}, inputs)
	}

	// 使用自定义hook
	useUpdateEffect(onListFun, [params])

	// 备注编辑
	const onOperationUpdate = (id: string, remarks: string) => {
		getOperationUpdate({id, remarks})
			.then((res: any) => {
				// eslint-disable-next-line no-empty
				if(res.success){}
			})
			.catch((err: any) => {
				message.error(err)
			})
	}
	const columns: any = [
		{
			title: '序号',
			dataIndex: 'order',
			align: 'center',
			width: 70,
			render(text: any, record: any, index: any) {
				return <span>{(params.current - 1) * 10 + index + 1}</span>
			},
		},
		{
			title: '补贴月份',
			dataIndex: 'subsidyMonth',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '提车月份',
			dataIndex: 'collectionMonth',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '订单号',
			dataIndex: 'orderNo',
			align: 'center',
			width: 300,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '订单位置',
			dataIndex: 'orderLocation',
			width: 150,
			align: 'center',
			ellipsis: true,
			render: (text: number, record: any) => (
				<>
					{text
						? dict.order_location?.map(
								(item: {
									dictKey: number
									dictValue: string
								}) => {
									if (
										Number(item?.dictKey) === Number(text)
									) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.dictValue}
											</Tag>
										)
									}
									return ''
								},
						  )
						: '--'}
				</>
			),
		},
		{
			title: '订单类型',
			dataIndex: 'orderType',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},
		{
			title: '订单标签',
			dataIndex: 'orderLabel',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},

		{
			title: '城市名称',
			dataIndex: 'cityName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '主体名称',
			dataIndex: 'principalName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '所属公司',
			dataIndex: 'corporateName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '司机姓名',
			dataIndex: 'driverName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '司机ID',
			dataIndex: 'driverId',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '交付模式',
			dataIndex: 'deliveryMode',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '订单状态',
			dataIndex: 'orderStatus',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},
		{
			title: '车牌号',
			dataIndex: 'carNo',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '品牌名称',
			dataIndex: 'brandName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},

		{
			title: '车型名称',
			dataIndex: 'modelName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '车款名称',
			dataIndex: 'vehicleModelName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '网约车订单品类',
			dataIndex: 'orderCategory',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '下单日期',
			dataIndex: 'orderDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '提车日期',
			dataIndex: 'dateOfCollection',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '租期',
			dataIndex: 'leaseTerm',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},
		{
			title: '合同开始日期',
			dataIndex: 'contractStartDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},

		{
			title: '合同结束日期',
			dataIndex: 'contractEndDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},

		{
			title: '预计结束日期',
			dataIndex: 'estimatedEndDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '订单实际结束日期',
			dataIndex: 'actualOrderEndDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '上一个订单ID',
			dataIndex: 'lastOrderNo',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},

		{
			title: '上一个订单提车日期',
			dataIndex: 'lastDateCollection',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},

		{
			title: '上一个订单结束日期',
			dataIndex: 'lastEndDate',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '押金（元）',
			dataIndex: 'deposit',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '首付（元）',
			dataIndex: 'downPayments',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '月租金（元）',
			dataIndex: 'monthlyRent',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '月服务费（元）',
			dataIndex: 'monthlyServiceFee',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '月总租金（租金+服务费）（元）',
			dataIndex: 'totalMonthlyRent',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},

		{
			title: '尾款（元）',
			dataIndex: 'balancePayment',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '补贴规则编号',
			dataIndex: 'subsidyRuleNo',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '适用订单类型',
			dataIndex: 'applicableOrderType',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{text ? <Tag color="processing">{text || '--'}</Tag> : '--'}
				</>
			),
		},
		{
			title: '考核期开始时间',
			dataIndex: 'startTime',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '考核期结束时间',
			dataIndex: 'endTime',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},

		{
			title: '本期考核起始时间',
			dataIndex: 'startTimeOfCurrent',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},

		{
			title: '本期考核结束时间',
			dataIndex: 'endTimeOfCurrent',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{text ? moment(text).format('YYYY-MM-DD') : '--'}</>
			),
		},
		{
			title: '本期考核期结束是否在租',
			dataIndex: 'isItUnderLease',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any, row: any) => (
				<>
					{yesoRno?.map((item: {key: number; label: string}) => {
						if (
							Number(item?.key) === Number(row?.awardDistribution)
						) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},

		{
			title: '安全奖是否达标',
			dataIndex: 'safetyAward',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},

		{
			title: '是否无欠租',
			dataIndex: 'rentArrears',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '欠租金额',
			dataIndex: 'amountInArrears',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{Number(text) >= 0 && text ? text : '--'}</>
			),
		},

		{
			title: '是否无违章',
			dataIndex: 'violation',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '未处理违章扣分',
			dataIndex: 'violationsDeductPoints',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{Number(text) >= 0 && text ? text : '--'}</>
			),
		},
		{
			title: '是否无出险',
			dataIndex: 'accident',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: 'X月出险次数',
			dataIndex: 'accidentsNumber',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>{Number(text) >= 0 && text ? text : '--'}</>
			),
		},
		{
			title: '是否提前完成年检',
			dataIndex: 'annualInspection',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '冲单奖是否达标',
			dataIndex: 'singleAward',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: 'X月日均完单量',
			dataIndex: 'averageDailyCompletion',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: 'X月月完单量',
			dataIndex: 'monthlyCompletion',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: 'X月日均TSH',
			dataIndex: 'averageDailyTsh',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: 'X月月TSH',
			dataIndex: 'monthlyTsh',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: 'X月日均高峰TSH',
			dataIndex: 'averageDailyPeakTsh',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: 'X月月高峰TSH',
			dataIndex: 'monthlyPeakTsh',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '合规是否达标',
			dataIndex: 'compliance',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '是否有人证',
			dataIndex: 'certification',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => (
				<>
					{ruleList?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},
		{
			title: '补贴方式',
			dataIndex: 'subsidyMode',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any, row: any) => (
				<>
					{dict?.subsidy_mode?.map(
						(item: {dictKey: number; dictValue: string}) => {
							if (
								Number(item?.dictKey) ===
								Number(row?.subsidyMode)
							) {
								return (
									<Tag color="processing">
										{item?.dictValue}
									</Tag>
								)
							}
							return ''
						},
					)}
				</>
			),
		},
		{
			title: '天数',
			dataIndex: 'days',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '金额',
			dataIndex: 'amount',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '实物类型',
			dataIndex: 'physicalType',
			align: 'center',
			width: 150,
			render: (text: any) => {
				const obj: any = dict?.entity_type?.filter(
					(item: {dictKey: any; dictValue: any}) =>
						Number(item.dictKey) === Number(text),
				)
				return obj[0] ? (
					<Tag color="processing">{obj[0].dictValue}</Tag>
				) : (
					'--'
				)
			},
		},
		{
			title: '实物名称',
			dataIndex: 'physicalName',
			align: 'center',
			width: 150,
			render: (text: any) => {
				const obj: any = dict?.issue_kind?.filter(
					(item: {dictKey: any; dictValue: any}) =>
						Number(item.dictKey) === Number(text),
				)
				return obj[0] ? (
					<Tag color="processing">{obj[0].dictValue}</Tag>
				) : (
					'--'
				)
			},
		},
		{
			title: '发放月份',
			dataIndex: 'distributionMonth',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '奖励达成期数',
			dataIndex: 'periods',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '奖励金额-实际值',
			dataIndex: 'actualAmount',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},
		{
			title: '已发放奖励是否追回',
			dataIndex: 'whetherToRecover',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => (
				<>
					{yesoRno?.map((item: {key: number; label: string}) => {
						if (Number(item?.key) === Number(text)) {
							return <Tag color="processing">{item?.label}</Tag>
						}
						return ''
					})}
				</>
			),
		},

		{
			title: '追回金额',
			dataIndex: 'recoveredAmount',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <>{text || '--'}</>,
		},

		{
			title: '备注',
			dataIndex: 'remarks',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any, row: any) => (
				<>
					<Input
						placeholder="请输入备注"
						maxLength={30}
						defaultValue={text}
						onBlur={(e) => {
							e.persist()
							onOperationUpdate(row?.id, e.target.defaultValue)
						}}
					/>
				</>
			),
		},
	]

	// 初始化分页
	useEffect(() => {
		const param = {
			current: 1,
			size: 10,
		}
		setParams(() => param)
	}, [searchData])

	// 搜索
	const onFinish = (values: any) => {
		const subsidyMonth = values?.subsidyMonth
			? formatDate(values?.subsidyMonth, 'YYYY-MM')
			: null
		const cityId = values?.city ? values?.city[1] : null
		const search = {
			...values,
			subsidyMonth,
			cityId,
		}
		delete search?.city
		setSearchData(search)
	}

	// 搜索重置
	const onReset = () => {
		setSearchData({})
	}
	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'time',
						key: 'subsidyMonth',
						name: 'subsidyMonth',
						subtype: 'month',
						label: '补贴月份',
					},
					{
						type: 'cascader',
						label: '城市名称',
						name: 'city',
						key: 'city',
						fieldNames: {
							label: 'name',
							value: 'id',
							children: 'cityInfoList',
						},
						items: [...citysList],
					},
					{
						type: 'select',
						key: 'principalId',
						name: 'principalId',
						label: '主体名称',
						keys: 'id',
						title: 'name',
						items: [...mainCompany],
					},
				],
			},
			{
				type: 'group',
				key: 'group2',
				groupItems: [
					{
						type: 'select',
						key: 'orderLocation',
						name: 'orderLocation',
						label: '订单位置',
						showSearch: true,
						keys: 'dictKey',
						title: 'dictValue',
						items: [...dict.order_location],
					},
					{
						type: 'select',
						key: 'orderType',
						name: 'orderType',
						label: '订单类型',
						keys: 'code',
						title: 'name',
						items: [...orderType],
					},
					{
						type: 'input',
						key: 'orderNo',
						name: 'orderNo',
						label: '订单号',
					},
				],
			},
			{
				type: 'group',
				key: 'group3',
				groupItems: [
					{
						type: 'treeSelect',
						label: '所属公司',
						name: 'companyId',
						key: 'companyId',
						keys: 'id',
						title: 'name',
						treeData: [...orgSource],
					},
					{
						type: 'input',
						name: 'driverName',
						key: 'driverName',
						label: '司机姓名',
					},
					{
						type: 'input',
						name: 'carNo',
						key: 'carNo',
						label: '车牌号',
					},
				],
			},
		]
		setFormData(formItems)
	}, [citysList, orgSource, orderType, dict, mainCompany])

	return (
		<div className={styles.page}>
			<div className="search">
				{formData && (
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				)}
			</div>
			<div className="btnlist">
				<Space size={12}>
					<Permissions permissionID="amc_merchantCenter_awardSettlement_driverDetailList_export">
						<Button
							icon={<ArrowDownOutlined />}
							ghost
							size="small"
							className="btn_import"
							onClick={() => {
								downloadDocumentUrl({
									resourceId: '166',
									queryDesc:
										'司机补贴全生命周期表导出,resourceId:166',
									queryParam: searchData,
								})
							}}>
							导出
						</Button>
					</Permissions>
				</Space>
			</div>
			<div className="table">
				<CustomTable
					params={params}
					columns={columns}
					pagination
					total={total}
					scroll={{y: 500}}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					kid="id"
					loading={loading}
					dataSource={dataSourse}
				/>
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({
	user,
}))(commodityPlan)
